<template>
	<!-- #ifdef H5 -->
	<view class="main">
		<view class="content" id="html2canvas" ref="html2canvas">
			<image class="pic" :src="goods.thumb" mode="aspectFill"></image>
			<view class="cont">
				<view class="left">
					<view class="item">
						<text>藏品名称：</text>
						<text>{{goods.title}}</text>
					</view>
					<view class="item">
						<text>创作者：</text>
						<text>{{goods.user_name}}</text>
					</view>
					<view class="item">
						<text>售价：</text>
						<text>¥{{goods.price}}</text>
					</view>
				</view>
				<view class="right">
					<div class="qrcode" ref="qrCodeUrl"></div>
				</view>
			</view>
		</view>
		<u-popup :show="show" closeable @close="close">
			<view class="img">
				<block v-if="imgUrl">
					<image 
					:src="imgUrl" 
					:style="{width:imgWidth+'px',height: imgHeight+'px'}" mode="aspectFill"></image>
					<view class="tips">长按图片保存到相册</view>
				</block>
				<u-loading-page :loading="!imgUrl" loading-text="正在生成图片"></u-loading-page>
			</view>
			
		</u-popup>
	</view>
	<!-- #endif -->
	
</template>

<script>
	// #ifdef H5
	import QRCode from 'qrcodejs2'
	import html2canvas from 'html2canvas'
	export default {
		name:"html2canvas",
		props:{
			show:{
				type:Boolean,
				default:()=>{
					return false
				}
			},
			goods:{
				type:Object,
				default:()=>{
					return {}
				}
			}
		},
		data() {
			return {
				imgUrl:'',
				imgHeight:0,
				imgWidth:0,
			};
		},
		mounted() {
			this.creatQrCode()
		},
		watch:{
			show(val){
				this.toImage()
			}
		},
		methods:{
			close(){
				this.$emit('close',false)
			},
			creatQrCode() {
				console.log('[生成二维码]')
			    var qrcode = new QRCode(this.$refs.qrCodeUrl, {
			        text: `https://pro.jrxtiejin.com/index.html#/subpage/Product/details?id=${this.goods.special_id}`, // 需要转换为二维码的内容
			        width: 80,
			        height: 80,
			        colorDark: '#000000',
			        colorLight: '#ffffff',
			        correctLevel: QRCode.CorrectLevel.H
			    })
			},
			toImage () {
				this.imgHeight = window.document.querySelector('#html2canvas').offsetHeight // 获取DOM高度
				this.imgWidth = window.document.querySelector('#html2canvas').offsetWidth // 获取DOM宽度
				
				html2canvas(window.document.querySelector('#html2canvas'), {
					width: this.imgWidth,
					height:this.imgHeight,
					backgroundColor: null,
					useCORS: true // 解决文件跨域问题
				}).then(canvas => {
					const url = canvas.toDataURL('image/png') // 生成的图片
					// 可以上传后端或者直接显示
					this.imgUrl = url
				})   
			},
			
		},
		
	}
	// #endif
</script>

<style lang="scss" scoped>
	.main{
		position: absolute;
		left: 0vw;
		top: -100vh;
		padding: 90rpx;
		min-height: 100vh;
		.content{
			.pic{
				width: 572rpx;
				height: 522rpx;
			}
			.cont{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					text{
						font-size: 28rpx;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 40rpx;
						&:nth-child(1){
							color: #A0A0A0;
						}
					}
				}
				.right{
					.qrcode{
					    display: inline-block;
					    ::v-deep img {
					        width: 176rpx;
					        height: 176rpx;
					        background-color: #fff; //设置白色背景色
					        padding: 6rpx; // 利用padding的特性，挤出白边
					        box-sizing: border-box;
					    }
					}
				}
			}
		}
		.img{
			padding: 90rpx;
			min-height: 100vh;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}
		.tips{
			font-size: 32rpx;
			font-weight: 400;
			color: #B9B9B9;
			line-height: 48rpx;
			margin-top: 44rpx;
		}
		::v-deep .u-popup__content {
			background-color:rgba(0,0,0,0.3)!important
		}
	}
</style>
